<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta name="author" content="wangbo">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- <link rel="stylesheet" type="text/css" href=""/> -->
	<title> 虚拟dom </title>
</head>

<body>
	
	<div id="app">

	</div>
	<script type="text/javascript" src="../js/react.development.js">    </script>
	<script type="text/javascript" src="../js/react-dom.development.js">    </script>
	<script type="text/javascript" src="../js/prop-types.js">    </script>
	<script type="text/javascript" src="../js/babel.min.js">    </script>
	<script type="text/babel">

/* 
key值的唯一是有范围的，即在数组生成的同级同类型的组件上要保持唯一，而不是所有组件的key都要保持唯一
不仅仅在数组生成组件上，其他地方也可以使用key，主要是react利用key来区分组件的，相同的key表示同一个组件，
react不会重新销毁创建组件实例，只可能更新；key不同，react会销毁已有的组件实例，重新创建组件新的实例。
不给组件 付key值得话,默认是位置或者是定位来区分的
相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建 
 */
		class Test extends React.Component {
			constructor(props) {
				super(props);
				this.state = {
					name: 'yewenjun'
				};
			}
			flag = 0;
			myClick = () => {
				this.flag++;
				this.setState({
					name: this.state.name === 'yewenjun' ? 'yewenhui' : 'yewenjun'
				})
			}

			render() {
				const { name } = this.state;
				return (
					<React.Fragment>
						<button onClick={this.myClick}  >我是按钮</button>
						{
							// this.state.name=== 'yewenjun' ? <div><Son1/><Son2/></div> :<div><Son2/><Son1/></div>
							this.state.name=== 'yewenjun' ? <div><Son1 key='1'/><Son2 key='21'/></div> 
							:<div><Son2 key='21'/><Son1 key='1'/></div>
							// this.state.name=== 'yewenjun' ? <div><Son1 key='1'/><Son1 key='1'/></div> 
							// :<div><Son2 key='21'/><Son2 key='21'/></div>
						}
					</React.Fragment>
				)
			}
		}

		class Son1 extends React.Component {
			componentDidMount() {
				console.log('child 挂载');
			}
			componentWillUnmount() {
				console.log('child 卸载');
			}
			render() {
				return (<div>我是1</div>)
			}
		}
		class Son2 extends React.Component {
			componentDidMount() {
				console.log('child 挂载');
			}
			componentWillUnmount() {
				console.log('child 卸载');
			}
			render() {
				return (<div>我是2</div>)
			}
		}
		ReactDOM.render(<Test />, document.getElementById("app"));
	</script>
</body>

</html>